<template>
  <view class="mask">
    <view
      class="teamDialog animate__animated animate__bounceIn"
    >
      <view class="title">修改队伍信息</view>
      <view class="content">
        <view class="item">
          <view class="formTitle">队名：</view>
          <view class="inputBox">
            <input type="text" v-model="dialogTeam.title" />
          </view>
        </view>
        <view class="item">
          <view class="formTitle">介绍：</view>
          <view class="inputBox">
            <input type="text" v-model="dialogTeam.introduce" />
          </view>
        </view>
        <view class="item">
          <view class="formTitle">密码：</view>
          <view class="inputBox">
            <input type="text" v-model="dialogTeam.password" />
          </view>
        </view>
        <view class="item">
          <view class="formTitle">标签：</view>
          <view class="inputBox" style="display: flex;" @click="showTagBox = true">
            <view class="tagItem" v-for="(item, index) in dialogTeam.tags" :key="index">{{item}}</view>
          </view>
        </view>
        <view class="btnGroup">
          <van-button
            block
            size="small"
            type="primary"
            color="#aaa"
            @click="handleCancelChange"
            custom-style="width:160rpx;"
            >取消</van-button
          >
          <van-button
            block
            size="small"
            color="#05A47D"
            @click="handleChangeInfo"
            custom-style="width:160rpx;"
            >保存</van-button
          >
        </view>
      </view>
      
      <!-- 选择标签dialog -->
      <view class="chooseTagBox" v-if="showTagBox">
        <view class="tagBox animate__animated animate__bounceIn">
           <view class="tagTitle">选择标签</view>
          <SelectTagBox             
             @chooseTagFinished="handleFinishTag"
            :tagList="tagList"
            :maxNumber="3" />
          <view class="btn">
            <van-button
              block
              size="small"
              type="primary"
              color="#aaa"
              @click="showTagBox = false"
              custom-style="width:160rpx;"
              >取消</van-button
            >
            <van-button
              block
              size="small"
              color="#05A47D"
              @click="handleSaveTag"
              custom-style="width:160rpx;"
              >确认</van-button
            >
          </view>
        </view>
      </view>
        

    </view>
  </view>
</template>

<script>
import SelectTagBox from "../../../components/public/SelectTagBox.vue"
export default {
  name: "TeamDialog",
  components:{
    SelectTagBox
  },
  props: {
    teamDetail: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
    showTagBox: false,
    dialogTeam:{},
     tagList: [
       "前端",
       "后端",
       "游戏",
       "竞赛",
       "Java",
       "Vue",
       "JavaScript",
       "React",
     ],
     tempTagList:[],
     
    };
  },
  mounted(){
    this.dialogTeam = this.teamDetail;
  },
  methods: {
    // 关闭dialog
    handleCancelChange() {
      this.$emit("closeDialog");
    },
    // 保存信息
    handleChangeInfo() {
      this.$emit("saveTeamInfo", this.dialogTeam);
    },
    
    // 选择标签完成
    handleFinishTag(list){
      this.tempTagList = list;
    },
    
    // 保存标签
    handleSaveTag(){
      this.dialogTeam.tags = this.tempTagList;
      this.showTagBox = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.mask {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 0.5s;
  z-index: 1000;
}
.teamDialog {
  position: relative;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.3);
  border-radius: 10rpx;

  .title {
    font-size: 38rpx;
    font-weight: 500;
    margin-bottom: 25rpx;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
  .item {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #aaa;
    margin-bottom: 20rpx;
    .inputBox {
      width: 300rpx;
      padding: 5rpx;
      border: 1px solid #eee;
      border-radius: 8rpx;
      color: grey;
    }
    .formTitle {
      width: 90rpx;
    }
    .tagItem{
      padding: 2rpx 8rpx;
      margin: 5rpx 10rpx;
      border-radius: 5rpx;
      background-color: #f4f4f5;
      color: #909399;
      border: 1px solid #e9e9eb;
      font-size: 26rpx;
      
    }
  }
  .btnGroup {
    display: flex;
    justify-content: space-between;
  }
  .chooseTagBox {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    .tagBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 400rpx;
      padding: 20rpx;
      background-color: #fff;
      z-index: 100;
      border-radius: 10rpx;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3) inset;

      .tagTitle {
        font-size: 38rpx;
        margin-bottom: 30rpx;
      }
      .tagContent {
        width: 300rpx;
        height: 100%;
      }
      .btn {
        width: 100%;
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
